<template>
  <div>
    <!-- 顶部导航栏 -->
    <div class="nav-header">
      <div class="logo">
        <svg
          class="heart-icon"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
        </svg>
        <span class="logo-text">智慧医疗</span>
      </div>
      
      <!-- 移动端汉堡菜单按钮 -->
      <div class="mobile-menu-btn" @click="toggleMenu">
        <svg :class="{'open': isMenuOpen}" width="24" height="24" viewBox="0 0 24 24">
          <path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z" />
        </svg>
      </div>
      
      <!-- 移动端导航菜单 -->
      <nav :class="{'mobile-menu-open': isMenuOpen}" class="mobile-nav-menu">
        <ul>
          <li
            v-for="(item, index) in menuList"
            :key="index"
            :class="{ active: isActive(item.path) }"
          >
            <router-link @click="closeMenu" :to="item.path">{{ item.label }}</router-link>
          </li>
          <li class="login-item">
            <router-link @click="closeMenu" to="/Login">登录/注册</router-link>
          </li>
        </ul>
      </nav>
    </div>

    <!-- 医院信息内容 -->
    <div class="hospital-info-container">
      <!-- 轮播图 -->
      <div class="carousel-container">
        <div class="carousel" @mouseenter="pauseAutoPlay" @mouseleave="resumeAutoPlay">
          <div class="carousel-inner" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
            <div 
              v-for="(item, index) in carouselItems" 
              :key="item.id" 
              class="carousel-item"
            >
              <img :src="item.img" :alt="item.title" class="carousel-image">
              <div class="carousel-caption" v-if="item.title">
                <h3>{{ item.title }}</h3>
              </div>
            </div>
          </div>
          
          <!-- 轮播图控制按钮 -->
          <button class="carousel-control prev" @click="prevSlide">‹</button>
          <button class="carousel-control next" @click="nextSlide">›</button>
          
          <!-- 轮播图指示器 -->
          <div class="carousel-indicators">
            <button
              v-for="(item, index) in carouselItems"
              :key="index"
              :class="{ active: currentIndex === index }"
              @click="goToSlide(index)"
            ></button>
          </div>
        </div>
      </div>

      <!-- 医院基本信息 -->
      <div class="hospital-header">
        <h1>{{ hospitalInfo.name }}</h1>
        <p class="hospital-intro">{{ hospitalInfo.introduction }}</p>
      </div>

      <!-- 医院科室信息 -->
      <div class="department-section">
        <h2>科室介绍</h2>
        <div class="department-grid">
          <div v-for="dept in departments" :key="dept.id" class="department-card">
            <h3>{{ dept.name }}</h3>
            <p>{{ dept.description || '暂无详细介绍' }}</p>
          </div>
        </div>
      </div>

      <!-- 医院公告 -->
      <div class="notice-section">
        <h2>医院公告</h2>
        
        <div class="notice-list">
          <div v-for="notice in notices" :key="notice.id" class="notice-card">
            <h3>{{ notice.title }}</h3>
            <!-- 使用v-html渲染可能包含HTML的内容 -->
            <div class="notice-content" v-html="notice.content"></div>
            
            <!-- 图片展示区域 - 使用img字段而非imageUrl -->
            <div v-if="notice.img" class="notice-image-container">
              <img :src="notice.img" :alt="notice.title" class="notice-image" @click="showImagePreview(notice.img)">
            </div>
            
            <p class="notice-time">{{ notice.day }}</p>
            <p class="notice-author" v-if="notice.author">发布人: {{ notice.author }}</p>
          </div>
        </div>
      </div>

      <!-- 图片预览模态框 -->
      <div v-if="showPreview" class="image-preview-modal" @click.self="showPreview = false">
        <div class="preview-content">
          <img :src="previewImageUrl" alt="公告图片预览" class="full-size-image">
          <button @click="showPreview = false" class="close-preview-btn">×</button>
        </div>
      </div>
    </div>

    <!-- 添加底部导航栏组件 -->
    <BottomNavigation />
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import BottomNavigation from '@/components/BottomNavigation.vue'

export default {
  components: {
    BottomNavigation
  },
  setup() {
    const router = useRouter();
    const isMenuOpen = ref(false);
    
    // 导航菜单配置
    const menuList = [
      { path: '/yonghu/home', label: '首页', icon: '#home-icon' },
      { path: '/yonghu/online-registration', label: '在线挂号', icon: '#registration-icon' },
      { path: '/yonghu/my-appointments', label: '我的预约', icon: '#appointment-icon' },
      { path: '/yonghu/hospital-info', label: '医院信息', icon: '#hospital-icon' },
      { path: '/yonghu/my', label: '我的', icon: '#my-icon' }
    ];

    // 检查当前路由是否激活
    const isActive = (path) => {
      return router.currentRoute.value.path === path;
    };

    // 切换菜单显示状态
    const toggleMenu = () => {
      isMenuOpen.value = !isMenuOpen.value;
    };

    // 关闭菜单
    const closeMenu = () => {
      isMenuOpen.value = false;
    };

    // 医院基本信息
    const hospitalInfo = ref({
      name: '大连东软医学信息工程一班22级五组创建的医院',
      introduction: '我院创建于2200006年，是一所集医疗、教学、科研、预防、保健、康复为一体的三级甲等综合性医院。医院占地面积10万平方米，开放床位1500张，年门诊量200万人次，年住院病人8万人次。'
    });

    // 科室数据
    const departments = ref([
      { id: 1, name: '内科', description: '设有心血管内科、呼吸内科、消化内科、神经内科等专科' },
      { id: 2, name: '外科', description: '包括普通外科、骨科、神经外科、胸外科等专科' },
      { id: 3, name: '妇产科', description: '妇科、产科、计划生育、生殖医学等专科' },
      { id: 4, name: '儿科', description: '新生儿科、儿童保健科、小儿内科等专科' },
      { id: 5, name: '急诊科', description: '24小时急诊服务，设有急诊内科、急诊外科等' },
      { id: 6, name: '中医科', description: '中医内科、针灸推拿、中医康复等专科' }
    ]);

    // 公告相关数据
    const notices = ref([]);
    const showPreview = ref(false);
    const previewImageUrl = ref('');

    // 轮播图相关数据
    const carouselItems = ref([]);
    const currentIndex = ref(0);
    const autoPlayInterval = ref(null);
    const autoPlayDelay = 3000; // 3秒自动切换

    // 获取轮播图数据
    const fetchCarouselItems = async () => {
      try {
        const response = await axios.get('http://localhost:8080/hospital5_war/carousel/findAll');
        carouselItems.value = response.data;
        startAutoPlay();
      } catch (error) {
        console.error('获取轮播图数据失败:', error);
      }
    };

    // 开始自动播放
    const startAutoPlay = () => {
      autoPlayInterval.value = setInterval(() => {
        nextSlide();
      }, autoPlayDelay);
    };

    // 暂停自动播放
    const pauseAutoPlay = () => {
      if (autoPlayInterval.value) {
        clearInterval(autoPlayInterval.value);
        autoPlayInterval.value = null;
      }
    };

    // 恢复自动播放
    const resumeAutoPlay = () => {
      if (!autoPlayInterval.value) {
        startAutoPlay();
      }
    };

    // 上一张
    const prevSlide = () => {
      currentIndex.value = (currentIndex.value - 1 + carouselItems.value.length) % carouselItems.value.length;
    };

    // 下一张
    const nextSlide = () => {
      currentIndex.value = (currentIndex.value + 1) % carouselItems.value.length;
    };

    // 跳转到指定幻灯片
    const goToSlide = (index) => {
      currentIndex.value = index;
    };

    // 获取公告列表
    const fetchNotices = async () => {
      try {
        const response = await axios.get('http://localhost:8080/hospital5_war/notice/findAll');
        notices.value = response.data;
      } catch (error) {
        console.error('获取公告失败:', error);
      }
    };

    // 图片预览
    const showImagePreview = (imageUrl) => {
      previewImageUrl.value = imageUrl;
      showPreview.value = true;
    };

    // 组件挂载时获取数据
    onMounted(() => {
      fetchCarouselItems();
      fetchNotices();
    });

    // 组件卸载时清除定时器
    onUnmounted(() => {
      if (autoPlayInterval.value) {
        clearInterval(autoPlayInterval.value);
      }
    });

    return {
      menuList,
      isMenuOpen,
      isActive,
      toggleMenu,
      closeMenu,
      hospitalInfo,
      departments,
      notices,
      showPreview,
      previewImageUrl,
      showImagePreview,
      carouselItems,
      currentIndex,
      prevSlide,
      nextSlide,
      goToSlide,
      pauseAutoPlay,
      resumeAutoPlay
    };
  }
};
</script>

<style scoped>
/* 顶部导航栏样式 */
.nav-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 56px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.logo {
  display: flex;
  align-items: center;
}

.heart-icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  color: #165DFF;
}

.logo-text {
  font-size: 18px;
  font-weight: bold;
  color: #165DFF;
}

/* 移动端汉堡菜单按钮 */
.mobile-menu-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
}

.mobile-menu-btn svg {
  transition: transform 0.3s ease;
}

.mobile-menu-btn.open svg {
  transform: rotate(45deg);
}

/* 移动端导航菜单 */
.mobile-nav-menu {
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 16px 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 9;
}

.mobile-menu-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.mobile-nav-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mobile-nav-menu li {
  margin: 8px 0;
  width: 100%;
  text-align: center;
}

.mobile-nav-menu li a {
  text-decoration: none;
  color: #333;
  padding: 8px 0;
  display: block;
  font-size: 16px;
}

.mobile-nav-menu li.active a {
  color: #165DFF;
  font-weight: 500;
}

.login-item {
  margin-top: 16px;
  width: 80%;
}

.login-item a {
  text-decoration: none;
  color: #fff;
  background-color: #165DFF;
  padding: 10px 16px;
  border-radius: 4px;
  display: block;
  text-align: center;
  transition: background-color 0.3s ease;
}

.login-item a:hover {
  background-color: #409eff;
}

/* 轮播图样式 */
.carousel-container {
  margin: 20px 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.carousel {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.carousel-inner {
  display: flex;
  transition: transform 0.5s ease;
  height: 100%;
}

.carousel-item {
  min-width: 100%;
  position: relative;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 20px;
  text-align: center;
}

.carousel-caption h3 {
  margin: 0;
  font-size: 1.5em;
}

.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.3);
  color: white;
  border: none;
  font-size: 2em;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
}

.carousel-control:hover {
  background: rgba(0, 0, 0, 0.6);
}

.carousel-control.prev {
  left: 20px;
}

.carousel-control.next {
  right: 20px;
}

.carousel-indicators {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  z-index: 10;
}

.carousel-indicators button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 0;
  transition: background 0.3s;
}

.carousel-indicators button.active {
  background: white;
}

/* 医院信息内容样式 */
.hospital-info-container {
  max-width: 1200px;
  margin: 70px auto 60px; /* 考虑顶部和底部导航栏的高度 */
  padding: 20px;
  font-family: 'Arial', sans-serif;
}

.hospital-header {
  text-align: center;
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.hospital-header h1 {
  color: #2c3e50;
  margin-bottom: 15px;
}

.hospital-intro {
  color: #555;
  line-height: 1.6;
  text-align: left;
  padding: 0 20px;
}

.department-section {
  margin-bottom: 40px;
}

.department-section h2 {
  color: #2c3e50;
  border-bottom: 2px solid #3498db;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.department-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.department-card {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}

.department-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.department-card h3 {
  color: #3498db;
  margin-bottom: 10px;
}

.notice-section {
  margin-top: 40px;
}

.notice-section h2 {
  color: #2c3e50;
  border-bottom: 2px solid #3498db;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.notice-list {
  display: grid;
  gap: 15px;
}

.notice-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.notice-card h3 {
  color: #2c3e50;
  margin-bottom: 10px;
}

.notice-content {
  color: #555;
  line-height: 1.6;
  margin-bottom: 10px;
  white-space: pre-line; /* 保留换行符 */
}

.notice-content >>> p {
  margin: 0.5em 0;
}

.notice-time {
  color: #7f8c8d;
  font-size: 0.9em;
}

.notice-author {
  color: #7f8c8d;
  font-size: 0.8em;
  font-style: italic;
}

.notice-image-container {
  margin: 15px 0;
  max-height: 300px;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.3s;
}

.notice-image-container:hover {
  transform: scale(1.02);
}

.notice-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* 图片预览模态框样式 */
.image-preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.preview-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}

.full-size-image {
  max-width: 100%;
  max-height: 80vh;
  display: block;
  margin: 0 auto;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.close-preview-btn {
  position: absolute;
  top: -40px;
  right: -40px;
  background: none;
  border: none;
  color: white;
  font-size: 2em;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.3s;
}

.close-preview-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .notice-image-container {
    max-height: 200px;
  }
  
  .close-preview-btn {
    top: -30px;
    right: 0;
  }
  
  .hospital-info-container {
    margin: 56px auto 60px;
    padding: 15px;
  }
  
  .department-grid {
    grid-template-columns: 1fr;
  }
  
  .carousel {
    height: 250px;
  }
  
  .carousel-control {
    width: 40px;
    height: 40px;
    font-size: 1.5em;
  }
  
  .carousel-caption h3 {
    font-size: 1.2em;
  }
}

@media (min-width: 768px) {
  .mobile-menu-btn, .mobile-nav-menu {
    display: none;
  }
}
</style>